<script setup>

import CommonBox from "../../components/CommonBox.vue";
import {ref} from "vue";

const labelOption = {
  show: true,
  fontSize: 16,
  position: "top",
  rich: {
    name: {}
  }
};

const option = ref({
  legend: {
    textStyle: {
      color: 'white'
    },
    data: ['需求总数', '已下单总数', '已入库总数']
  },
  xAxis: {
    type: 'category',
    data: ['供应商管理解决方案', '进存销解决方案', 'finebi', '简道云']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '需求总数',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [80, 30, 70, 20, 55]
    },
    {
      name: '已下单总数',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [30, 30, 67, 3, 35]
    },
    {
      name: '已入库总数',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [0, 3, 3, 3, 0]
    },
  ]
});

</script>

<template>
  <common-box>
    <div class="chart-header">
      不同商品的采购需求
    </div>
    <div style="height: 15em;width: 100%;">
      <v-chart :option="option"></v-chart>
    </div>
  </common-box>
</template>

<style scoped>
.chart-header {
  text-align: left;
  font-size: 0.5em;
  padding: 0.2em 0 0.2em 1em;
}
</style>